<template>
	<view class="mian">
		<view v-if="userinfo.tbUser">
			<view @click="submitForm"><img :src="api.getUserLogo(userinfo.tbUser.uid)" class="avatar" /></view>
		</view>
		<view class="flex">
			<view class="text">用户名</view>
			<input type="text" v-model="tbUserInfo.nickname" placeholder="暂未设置用户名">
		</view>
		<view class="flex">
			<view class="text">性别</view>
			<uni-data-select v-model="tbUserInfo.sex" :localdata="sex" :clear="false"></uni-data-select>
			<!-- <radio-group @change="radioChange">
				<label v-for="(iteam,index) in sex" :key="index">
					<radio class="custom-radio" :value="iteam.value" />
					<text>{{iteam.text}}</text>
				</label>
			</radio-group> -->
		</view>
		<view class="flex">
			<view class="text">QQ</view>
			<input type="text" v-model="tbUserInfo.qq" placeholder="无">
		</view>
		<view class="flex">
			<view class="text">微信</view>
			<input type="text" v-model="tbUserInfo.wechat" placeholder="无">
		</view>
		<view class="flex">
			<view class="text">自我简介</view>
			<textarea v-model="tbUserInfo.info" placeholder="点击添加介绍让大家更快认识你" />
		</view>
		<button class="button" @click="modify">修改</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from '../../../script/api.js'
	import tools from '../../../script/tools.js'
	import {
		userinfoStore
	} from '../../../store/index.js'
	import {
		storeToRefs
	} from 'pinia'

	const {
		islogin,
		userinfo,
		tbUserInfo
	} = storeToRefs(userinfoStore())

	const {
		queryUserInfo
	} = userinfoStore()

	// 修改头像按钮
	const submitForm = () => {
		uni.chooseImage({
			success: (info) => {
				console.log("1====>", info)
				if (info.tempFiles.length == 1) {
					api.upload('/user/logo', {}, info.tempFiles[0], info.tempFilePaths[0], (resp) => {
						console.log("2====>", resp)
						uni.showToast({
							title: resp.message
						})
						updateUserInfo()
					})
				}
			},
			fail: (info) => {
				console.log(info)
			}
		})
	}

	const sex = ref([{
			value: 'm',
			text: "男性"
		},
		{
			value: 'f',
			text: "女性"
		},
		{
			value: 'n',
			text: "保密"
		},
	]);

	const radioChange = (e) => {
		sex = e.detail.value
	}

	// 修改按钮
	const modify = () => {
		api.put('/user', tbUserInfo.value, (resp) => {
			if (resp.success) {
				queryUserInfo()
				uni.showToast({
					title: resp.message
				});
			} else if (data.code) {
				uni.showToast({
					title: resp.message
				});
			}
		})
	}
</script>

<style lang="scss" scoped>
	.mian {
		padding: 20px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.flex {
		display: flex;
		padding: 5px;
	}

	.text {
		width: 80px;
	}

	.radio {
		color: #1890ff;
		transform: scale(0.7);
	}

	/* custom-radio.css */
	.custom-radio .uni-radio__input {
		border-color: #dcdcdc;
		/* 未选中时的边框颜色 */
		background-color: #1890ff;
		/* 选中时的背景颜色 */
	}

	.custom-radio .uni-radio__input::after {
		background-color: #1890ff;
		/* 选中时的圆点颜色 */
	}

	.button {
		margin: 50rpx 0px;
		color: #fff;
		background-color: #1890ff;
	}
</style>